Angular Material-এ Data Table একটি অত্যন্ত জনপ্রিয় কম্পোনেন্ট যা বড় আকারের ডেটা ডিসপ্লে করার জন্য ব্যবহৃত হয়। এটি খুবই কাস্টমাইজেবল এবং ব্যবহারযোগ্য, যেখানে pagination, sorting, filtering, এবং responsive design সহ আরও অনেক সুবিধা পাওয়া যায়। Angular Material Data Table ব্যবহার করে আপনি খুব সহজেই আপনার অ্যাপ্লিকেশনে একটি ডাইনামিক এবং ফিচার-প্যাকড টেবিল তৈরি করতে পারবেন।

Angular Material Data Table সেটআপ

Angular Material Data Table ব্যবহারের জন্য, প্রথমে আপনাকে Angular Material ইনস্টল করতে হবে এবং প্রয়োজনীয় মডিউলগুলো ইম্পোর্ট করতে হবে।

1. Angular Material ইনস্টল করা

Angular CLI ব্যবহার করে Angular Material ইনস্টল করতে:

ng add @angular/material

এটি আপনাকে প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করার সাথে সাথে একটি থিমও নির্বাচন করতে বলবে।

2. প্রয়োজনীয় মডিউল ইম্পোর্ট করা

Angular Material Data Table ব্যবহারের জন্য, আপনাকে MatTableModule, MatPaginatorModule, MatSortModule ইত্যাদি মডিউলগুলো ইম্পোর্ট করতে হবে।

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input'; // Filter functionality জন্য

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule
  ]
})
export class AppModule { }

Data Table তৈরি করা

এখন Angular Material Data Table ব্যবহার করার জন্য আপনাকে একটি টেবিল তৈরি করতে হবে এবং ডেটা সোর্সের সাথে এটি যুক্ত করতে হবে।

1. টেবিল কম্পোনেন্ট তৈরি করা

ধরা যাক, আপনি একটি UsersComponent তৈরি করছেন যেখানে ব্যবহারকারীদের একটি লিস্ট টেবিল আকারে দেখানো হবে।

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

export interface User {
  id: number;
  name: string;
  email: string;
}

const USERS_DATA: User[] = [
  {id: 1, name: 'John Doe', email: 'john@example.com'},
  {id: 2, name: 'Jane Smith', email: 'jane@example.com'},
  {id: 3, name: 'Mary Johnson', email: 'mary@example.com'},
  // আরও ডেটা
];

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'email'];
  dataSource = new MatTableDataSource(USERS_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator | undefined;
  @ViewChild(MatSort) sort: MatSort | undefined;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

2. টেম্পলেটে Data Table সেটআপ

এখন, users.component.html ফাইলে টেবিলটি তৈরি করুন এবং Angular Material এর কম্পোনেন্টগুলো ব্যবহার করুন:

<div class="mat-elevation-z8">
  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Filter">
  </mat-form-field>

  <table mat-table [dataSource]="dataSource" matSort>

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

এখানে:

• matTable ডিরেক্টিভের মাধ্যমে টেবিলটি তৈরি করা হয়েছে।
• matColumnDef ব্যবহার করে প্রতিটি কলামের জন্য ডেফিনিশন তৈরি করা হয়েছে (যেমন, ID, Name, Email)।
• matSort সোর্টিং ফিচার যোগ করা হয়েছে, যাতে ব্যবহারকারী কলাম হেডারের উপর ক্লিক করে সorting করতে পারে।
• mat-paginator দিয়ে পেজিনেশন যোগ করা হয়েছে যাতে ব্যবহারকারী ডেটা পেজ বাই পেজ দেখতে পারে।

আরও কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

1. সোর্টিং (Sorting)

আপনি যেকোনো কলামে সোর্টিং করতে পারেন। Angular Material mat-sort-header ডিরেক্টিভের মাধ্যমে সোর্টিং সক্ষম করা হয়েছে।

2. পেজিনেশন (Pagination)

পেজিনেশন দ্বারা আপনি টেবিলের ডেটাকে বিভিন্ন পেজে ভাগ করে ব্যবহারকারীর সুবিধার্থে দেখাতে পারেন। mat-paginator এর মাধ্যমে আপনি পেজ সাইজ এবং পেজ নেভিগেশন কন্ট্রোল করতে পারেন।

3. ফিল্টারিং (Filtering)

Filter ফিচার ব্যবহার করে ব্যবহারকারী টেবিলের ডেটার মধ্যে কিওয়ার্ডের মাধ্যমে অনুসন্ধান করতে পারে। applyFilter মেথডে ফিল্টারিং লজিক যুক্ত করা হয়।

সারাংশ

Angular Material Data Table একটি খুবই শক্তিশালী টুল যা Angular অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ টেবিল তৈরি করতে ব্যবহৃত হয়। এটি sorting, pagination, এবং filtering ফিচারসমূহ সরবরাহ করে যা ইউজার ইন্টারফেসকে আরও উন্নত এবং ব্যবহারযোগ্য করে তোলে। Angular Material এর সাহায্যে Data Table তৈরি করা অনেক সহজ এবং কাস্টমাইজ করা যায়।